<template>
    <van-nav-bar title="搜索" left-arrow @click-left="bindSearch">
    </van-nav-bar>
    <!-- <van-search v-model="searchValue" placeholder="搜索你喜欢的商品" @search="onSearch" />-->
    <div id="searchGoods">
        <van-search v-model="searchValue" autocomplete="off" show-action placeholder="请输入商品关键字、品牌" @search="onSearch"
            @cancel="onCancel">
        </van-search>
        <!-- <img src="" alt=""> -->
        <van-grid :column-num="2">
            <van-grid-item v-for="item in SearchGoods" :key="item" v-if="state">
                <div class="searchGoodsDis">
                    <img :src="item.picture" style="width: 160px;height: 150px;border-radius: 10%;" />
                    <p class="searchPrice">{{ item.price }}</p>
                    <p class="serchP">{{ item.detail }}</p>
                </div>
            </van-grid-item>
        </van-grid>
    </div>
</template>

<script setup lang="ts">
import { useSearGoods } from "@/hooks/searchGoods"
const bindSearch = () => history.back()//点击返回，返回上一级页面
const { searchValue, onSearch, onCancel, SearchGoods, state } = useSearGoods()
</script>

<style lang="scss" scoped>
.van-grid-item {
    background-color: #cccccc;

    .van-image {
        border: 2px solid #ff5252;
    }

    .searchGoodsDis {
        .searchPrice {
            color: #ff5252;
            text-align: center;
            font-size: 14px;
        }

        .serchP {
            max-width: 150px;
            white-space: nowrap;
            overflow: hidden; //文本超出隐藏
            text-overflow: ellipsis; //文本超出省略号替代
            padding: 2px auto;
        }
    }
}
</style>
